<template>
	<view>
		<view class="index1">
			<view style="font-size: large;font-weight: 500; color: #FFFFFF;">七塔社区避灾安置点</view>
			<view class="flex">
				<view style="margin-top: 20rpx ;font-size: 28rpx;color: #FFFFFF;">箕漕街38弄23-25号楼下</view>	
				<view class="flex1">
					<view style="font-size: smaller; margin-top: 6rpx;color: #FFFFFF;">距您890米</view> 
					<view class="oringe" style="font-size: 10px;margin: 8rpx 8rpx;color: #FFFFFF;">可接纳200人</view>
					<view class="oringe" style="font-size: 10px;margin: 8rpx 4rpx;color: #FFFFFF;">设备齐全</view>
				</view>		
			</view>
		</view>
		<view class="message">
			<view class="message1">
			<view style="color: #0050FF;font-size: 36rpx;flex: 1;margin-left: 78rpx;margin-top: 38rpx;">规范化建设信息</view>
			<view style="font-size: 32rpx;flex: 1;margin-left: 115rpx;margin-top: 38rpx;" >房屋安全信息</view>
			</view>
			<view style="background-color: #0052FF;height: 6rpx;width: 60rpx; margin-left: 174rpx; margin-top: 8rpx;"></view>
		</view>
		<view class="guifanhua2">
		<view class="guifanhua">
			<view style="font-size: 34rpx;margin-left: 30rpx;margin-top: 16rpx;font-weight: 500;">1、办公室</view>
			<view style="display: flex; ">
				<view style="width: 28rpx;height: 28rpx;border-radius: 28rpx;background-color: #F0F0F0;margin-left: 30rpx;margin-top: 30rpx; "></view>
				<view style="font-size: 32rpx;margin-left: 16rpx;margin-top: 20rpx;">有</view>
			</view>
		</view>
		
		<view class="guifanhua">
			<view style="font-size: 34rpx;margin-left: 30rpx;margin-top: 16rpx;font-weight: 500;">2、避灾安置场所标识牌</view>
			<view style="display: flex; ">
				<view style="width: 28rpx;height: 28rpx;border-radius: 28rpx;background-color: #F0F0F0;margin-left: 30rpx;margin-top: 30rpx; "></view>
				<view style="font-size: 32rpx;margin-left: 16rpx;margin-top: 20rpx;">有</view>
			</view>
		</view>
		
		<view class="guifanhua">
			<view style="font-size: 34rpx;margin-left: 30rpx;margin-top: 16rpx;font-weight: 500;">3、餐具</view>
			<view style="display: flex;  ">
				<view style="width: 28rpx;height: 28rpx;border-radius: 28rpx;background-color: #F0F0F0;margin-left: 30rpx;margin-top: 30rpx; "></view>
				<view style="font-size: 32rpx;margin-left: 16rpx;margin-top: 20rpx;">有</view>
			</view>
		</view>
		
		<view class="guifanhua">
			<view style="font-size: 34rpx;margin-left: 30rpx;margin-top: 16rpx;font-weight: 500;">4、床铺（行军床或折叠床等）配备情况</view>
			<view style="display: flex; ">
				<view style="width: 28rpx;height: 28rpx;border-radius: 28rpx;background-color: #F0F0F0;margin-left: 30rpx;margin-top: 30rpx; "></view>
				<view style="font-size: 32rpx;margin-left: 16rpx;margin-top: 20rpx;">有</view>
			</view>
		</view>
		
		<view class="guifanhua1">
			<view style="font-size: 34rpx;margin-left: 30rpx;margin-top: 16rpx;font-weight: 500;">1、办公室</view>
			<view style="display: flex;  ">
				<view style="width: 28rpx;height: 28rpx;border-radius: 28rpx;background-color: #F0F0F0;margin-left: 30rpx;margin-top: 30rpx; "></view>
				<view style="font-size: 32rpx;margin-left: 16rpx;margin-top: 20rpx;">有</view>
			</view>
			<view style="font-size: 26rpx; color: #666666; margin-left: 82rpx; margin-top: 26rpx;">备注：</view>
			<view style="color: #333333; font-size: 28rpx; margin-left: 82rpx;margin-top: 16rpx;">不足20</view>
		</view>
		</view>
		<view class="fangwuanquan"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
.index1{
			width: 750rpx;
			height: 200rpx;
			
			background-color: #5395FF;
			padding-top: 36rpx;
			padding-left: 30rpx;
			
			.flex{
				//将两个view放在同一行
				//display: flex;  
				//让两个view平均分配位置
				// .view2{
				// 	flex: 1;
				//}
				.flex1{
					display: flex;
					.oringe{
						
						padding: 3rpx 9rpx;
						color: #FA6400;
						background-color: #2B78F2 ;
						border-radius: 3px;
						
					}
				}
				
			}
		}
.message{
	
	height: 140rpx;
	border-bottom: 20rpx solid #F6F8FB;
	.message1{
		display: flex;
	}
}
.guifanhua{
	height: 148rpx;
	border-bottom: 2rpx solid #EFEFEF;
}
.guifanhua1{
	height: 408rpx;
	border-bottom: 2rpx solid #EFEFEF;
}
</style>
